<template>
  <el-card class="box-card" shadow="never">
    <el-steps
      :active="showForm.active"
      finish-status="success"
      style="width: 100%; margin: 40px 0"
      align-center
    >
      <el-step title="填写商品分类" />
      <el-step title="填写商品促销" />
      <el-step title="填写商品属性" />
      <el-step title="选择商品关联" />
    </el-steps>
    <!-- 第一个表单,商品信息 -->
    <el-form
      ref="productInfo"
      :model="productInfoRule"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      style="width: 700px"
      v-show="showForm.showLsit[0]"
    >
      <el-form-item label="商品分类:" prop="productCategoryName" required>
        <el-cascader
          v-model="productInfoRule.productCategoryName"
          :options="productCategory"
          placeholder="请选择商品分类"
        />
      </el-form-item>
      <el-form-item label="商品名称:" prop="name" required>
        <el-input v-model="productInfoRule.name" />
      </el-form-item>
      <el-form-item label="副标题:" prop="subTitle" required>
        <el-input v-model.number="productInfoRule.subTitle" />
      </el-form-item>
      <el-form-item label="商品品牌:" prop="brandName" required>
        <el-select
          v-model="productInfoRule.brandName"
          clearable
          placeholder="请选择品牌"
        >
          <el-option
            v-for="i in productBrand"
            :label="i.name"
            :value="i.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品介绍:" prop="description">
        <el-input
          v-model.number="productInfoRule.description"
          type="textarea"
          resize="none"
        />
      </el-form-item>
      <el-form-item label="商品货号:" prop="productSn">
        <el-input v-model.number="productInfoRule.productSn" />
      </el-form-item>
      <el-form-item label="商品售价:" prop="price">
        <el-input v-model.number="productInfoRule.price" />
      </el-form-item>
      <el-form-item label="市场价:" prop="originalPrice">
        <el-input v-model.number="productInfoRule.originalPrice" />
      </el-form-item>
      <el-form-item label="商品库存:" prop="stock">
        <el-input v-model.number="productInfoRule.stock" />
      </el-form-item>
      <el-form-item label="计量单位:" prop="unit">
        <el-input v-model.number="productInfoRule.unit" />
      </el-form-item>
      <el-form-item label="商品重量:" prop="weight">
        <el-input
          v-model.number="productInfoRule.weight"
          style="width: 280px; margin-right: 20px"
        />克
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model.number="productInfoRule.sort" />
      </el-form-item>
      <el-form-item>
        <div style="width: 100%; text-align: center">
          <el-button type="primary" @click="submitForm(productInfo, 1)"
            >下一步,填写商品促销</el-button
          >
        </div>
      </el-form-item>
    </el-form>
    <!-- 第二个表单,商品促销 -->
    <el-form
      ref="productPromotion"
      :model="promotionRule"
      status-icon
      :rules="rules"
      label-width="160px"
      class="demo-ruleForm"
      style="width: 700px"
      v-show="showForm.showLsit[1]"
    >
      <el-form-item label="赠送积分:" prop="giftPoint">
        <el-input
          v-model="promotionRule.giftPoint"
          placeholder="Please input"
        />
      </el-form-item>
      <el-form-item label="赠送成长值:" prop="giftGrowth">
        <el-input
          v-model="promotionRule.giftGrowth"
          placeholder="Please input"
        />
      </el-form-item>
      <el-form-item label="积分购买限制:" prop="usePointLimit">
        <el-input
          v-model="promotionRule.usePointLimit"
          placeholder="Please input"
        />
      </el-form-item>
      <el-form-item label="预告商品:" prop="previewStatus">
        <el-switch v-model="promotionRule.previewStatus" />
      </el-form-item>
      <el-form-item label="商品上架:" prop="publishStatus">
        <el-switch v-model="promotionRule.publishStatus" />
      </el-form-item>
      <el-form-item label="商品推荐:" prop="recommandStatus">
        <span class="recommend">新品</span
        ><el-switch v-model="promotionRule.recommandStatus" />
        <span class="recommend">推荐</span>
        <el-switch v-model="promotionRule.newStatus" />
      </el-form-item>
      <el-form-item label="服务保证:" prop="serviceIds">
        <el-checkbox-group
          v-model="promotionRule.serviceIds"
          @change="showchange"
        >
          <el-checkbox label="1">无忧退货</el-checkbox>
          <el-checkbox label="2">快速退款</el-checkbox>>
          <el-checkbox label="3">免费包邮</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="详细页标题:" prop="detailTitle">
        <el-input v-model="promotionRule.detailTitle" />
      </el-form-item>
      <el-form-item label="详细页描述:" prop="detailDesc">
        <el-input v-model="promotionRule.detailDesc" />
      </el-form-item>
      <el-form-item label="商品关键字:" prop="keywords">
        <el-input v-model="promotionRule.keywords" placeholder="Please input" />
      </el-form-item>
      <el-form-item label="商品备注:" prop="note">
        <el-input v-model="promotionRule.note" type="textarea" resize="none" />
      </el-form-item>
      <!-- 根据选择优惠的方式显示 -->
      <el-form-item label="选择优惠方式:" prop="pass">
        <div>
          <el-radio-group
            v-model="radio1"
            class="radio-group"
            @change="changDiscount"
          >
            <el-radio-button :label="0">无优惠</el-radio-button>
            <el-radio-button :label="1">特惠促销</el-radio-button>
            <el-radio-button :label="2">会员价格</el-radio-button>
            <el-radio-button :label="3">阶梯价格</el-radio-button>
            <el-radio-button :label="4">满减价格</el-radio-button>
          </el-radio-group>
          <!-- 无优惠 -->
          <div v-show="showDiscount[0]"></div>
          <!-- 特惠促销设置 -->
          <div v-show="showDiscount[1]">
            <div class="preferentialTime">
              <span>开始时间:&nbsp;&nbsp;&nbsp;</span>
              <el-date-picker
                v-model="promotionRule.promotionStartTime"
                type="datetime"
                :disabled-date="disabledDate"
                :clearable="false"
                placeholder="选择开始时间"
              />
            </div>
            <div class="preferentialTime">
              <span>结束时间:&nbsp;&nbsp;&nbsp;</span>
              <el-date-picker
                v-model="promotionRule.promotionEndTime"
                type="datetime"
                :disabled-date="disabledDate"
                :clearable="false"
                placeholder="选择结束时间"
              />
            </div>
            <div class="preferentialTime">
              <span>促销价格:&nbsp;&nbsp;&nbsp;</span>
              <el-input
                v-mode="promotionRule.promotionPrice"
                placeholder="输入促销价格"
                style="width: 215px"
              />
            </div>
          </div>
          <!-- 会员价格 -->
          <div v-show="showDiscount[2]">
            <div class="preferentialTime">
              <span>黄金会员:&nbsp;&nbsp;&nbsp;</span>
              <el-input
                v-model="promotionRule.memberPriceList[0].memberPrice"
                resize="none"
                style="width: 215px"
              />
            </div>
            <div class="preferentialTime">
              <span>白金会员:&nbsp;&nbsp;&nbsp;</span>
              <el-input
                v-model="promotionRule.memberPriceList[1].memberPrice"
                resize="none"
                style="width: 215px"
              />
            </div>
            <div class="preferentialTime">
              <span>钻石会员:&nbsp;&nbsp;&nbsp;</span>
              <el-input
                v-model="promotionRule.memberPriceList[2].memberPrice"
                resize="none"
                style="width: 215px"
              />
            </div>
          </div>
          <!-- 阶梯价格 -->
          <div v-show="showDiscount[3]">
            <el-table :data="promotionRule.productLadderList" border>
              <el-table-column label="数量" prop="count" align="center">
                <template #default="scope">
                  <el-input v-model="scope.row.count" clearable />
                </template>
              </el-table-column>
              <el-table-column label="折扣" prop="discount" align="center">
                <template #default="scope">
                  <el-input v-model="scope.row.discount" clearable />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="addChangePrice(promotionRule.productLadderList)"
                    >添加</el-button
                  >
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="
                      delChangePrice(
                        promotionRule.productLadderList,
                        scope.$index
                      )
                    "
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 满减价格 -->
          <div v-show="showDiscount[4]">
            <el-table :data="promotionRule.productFullReductionList" border>
              <el-table-column label="满" prop="fullPrice" align="center">
                <template #default="scope">
                  <el-input v-model="scope.row.fullPrice" clearable />
                </template>
              </el-table-column>
              <el-table-column label="减" prop="reducePrice" align="center">
                <template #default="scope">
                  <el-input v-model="scope.row.reducePrice" clearable />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="
                      addChangePrice(promotionRule.productFullReductionList)
                    "
                    >添加</el-button
                  >
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="
                      delChangePrice(
                        promotionRule.productFullReductionList,
                        scope.$index
                      )
                    "
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-form-item>
      <el-form-item prop="submitProduct" class="submitProduct">
        <el-button @click="changStept(0)">上一步,填写商品信息</el-button>
        <el-button @click="changStept(1)" type="primary"
          >下一步,填写商品属性</el-button
        >
      </el-form-item>
    </el-form>
    <!--第三个表单,商品属性 -->
    <el-form
      ref="productProperties"
      :model="attributeRule"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      style="width: 700px"
      v-show="showForm.showLsit[2]"
    >
      <el-form-item label="属性类型:" prop="productAttributeCategoryId">
        <el-select
          v-model="attributeRule.productAttributeCategoryId"
          class="m-2"
          placeholder="请选择属性类型"
          @change="attrChange"
        >
          <el-option v-for="i in productAttr" :label="i.name" :value="i.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品规格:" prop="productAttributeValueList">
        <el-card class="productAttr-card" shadow="never">
          <div
            v-for="(item, index) in attrList.specsList"
            :key="index"
            class="text item"
          >
            <div>{{ item.name }} :</div>
            <div>
              <span v-for="i in attrList.arrtArr2[index]">
                <el-checkbox :label="i.value" />
                <el-button type="primary" text @click="delAttr(index)"
                  >删除</el-button
                >
              </span>
            </div>
            <div>
              <el-input
                style="width: 160px; margin-right: 10px"
                v-model="attrList.arrtArr[index]"
              />
              <el-button @click="pushAttr(index)">增加</el-button>
            </div>
          </div>
        </el-card>
        <el-table
          :data="attributeRule.productAttributeValueList"
          border
          style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column
            v-if="attributeRule.productAttributeValueList.length !== 0"
            v-for="(item, index) in attributeRule.productAttributeValueList"
            :key="index"
            :prop="item.value"
            :label="item.productAttributeId"
          />
          <el-table-column prop="item.value" label="销售价格" align="center" />
          <el-table-column prop="item.value" label="商品库存" align="center" />
          <el-table-column
            prop="item.value"
            label="库存预警值"
            align="center"
          />
          <el-table-column prop="item.value" label="sku编号" align="center" />
          <el-table-column prop="item.value" label="操作" align="center" />
        </el-table>
        <el-button @click="alertFn" type="primary">刷新列表</el-button>
        <el-button @click="alertFn" type="primary">同步价格</el-button>
        <el-button @click="alertFn" type="primary">同步库存</el-button>
      </el-form-item>
      <el-form-item label="商品参数:" prop="productAttributeValueList">
        <el-card class="productAttr-card" shadow="never">
          <el-form label-width="100px" style="max-width: 460px">
            <el-form-item
              :label="item.name"
              v-for="(item, index) in attrList.paramsList"
              style="margin-bottom: 10px"
            >
              <el-input
                style="width: 160px; margin-right: 10px"
                v-model="attrList.arrtArr[index]"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-form-item>
      <el-form-item label="商品相册:" prop="pic">
        <el-upload
          v-model:file-list="fileList"
          list-type="picture-card"
          class="avatar-uploader"
          action="http://120.24.64.5:8088/mall-admin/minio/upload"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          :limit="1"
        >
          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="规格参数:" prop="pass">
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
          <el-tab-pane label="电脑端详情" name="first">
            <Tinymce
              v-model="attributeRule.detailHtml"
              @change="handleChange"
              width="100%"
            />
          </el-tab-pane>
          <el-tab-pane label="移动端详情" name="second">
            <Tinymce
              v-model="attributeRule.detailMobileHtml"
              @change="handleChange"
              width="100%"
            />
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item prop="pass" class="submitProduct">
        <el-button @click="changStept(0)">上一步,填写商品促销</el-button>
        <el-button @click="changStept(1)" type="primary"
          >下一步,选择商品关联</el-button
        >
      </el-form-item>
    </el-form>
    <!--第四个表单,商品关联 -->
    <el-form
      ref="productAssociation"
      :model="associationRule"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      style="width: 700px"
      v-show="showForm.showLsit[3]"
    >
      <el-form-item label="关联专题:" prop="subjectProductRelationList">
        <el-transfer
          v-model="associationRule.subjectProductRelationList"
          filterable
          filter-placeholder="State Abbreviations"
          :data="transData1"
        />
      </el-form-item>
      <el-form-item label="关联优选:" prop="pass">
        <el-transfer
          v-model="associationRule.prefrenceAreaProductRelationList"
          filterable
          filter-placeholder="State Abbreviations"
          :data="transData2"
        />
      </el-form-item>
      <el-form-item prop="pass" class="submitProduct">
        <el-button @click="changStept(0)">上一步,填写商品属性</el-button>
        <el-button type="primary" @click="lastSubmit">完成,提价商品</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRaw } from "vue";
import {
  type FormInstance,
  type FormRules,
  type CascaderOption,
  ElMessage,
  ElMessageBox,
  UploadUserFile,
} from "element-plus";
// api
import { addProduct } from "../../request/api";
import { useRouter } from "vue-router";
//初始化数据
// 1.商品分类
let formatFn = (res: addProduct.withChildrenData[]) => {
  let cascader = [] as CascaderOption[];
  res.forEach((i) => {
    cascader.push({
      value: i.id,
      label: i.name,
      children: i.children ? formatFn(i.children) : [],
    });
  });
  return cascader;
};
let productCategory = reactive([] as CascaderOption[]);
addProduct.withChildren().then((res) => {
  formatFn(res).forEach((i: CascaderOption) => {
    productCategory.push(i);
  });
});
onMounted(() => {});
const productInfo = ref<FormInstance>();
// 2.商品品牌
let productBrand = reactive([] as addProduct.IlistAllBrand[]);
addProduct.listAllBrand().then((res) => {
  res.forEach((i) => {
    productBrand.push(i);
  });
});
// 3.商品属性
let productAttr = reactive([] as addProduct.IallProductAttribute[]);
addProduct.allProductAttribute().then((res) => {
  res.forEach((i) => {
    productAttr.push(i);
  });
});
// 4.穿梭框数据
let transData1 = reactive([] as any);
addProduct.subListAll().then((res) => {
  res.forEach((i: any) => {
    transData1.push({
      key: i.id,
      label: i.title,
    });
  });
});
let transData2 = reactive([] as any);
addProduct.prefListAll().then((res) => {
  res.forEach((i: any) => {
    transData2.push({
      key: i.id,
      label: i.name,
    });
  });
});

let showchange = (val: any) => {
  console.log(val);
  console.log(promotionRule);
};
// 时间日期拾取器约束
let disabledDate = (time: Date) => {
  return time.getTime() < Date.now();
};

// 商品信息表单数据
const productInfoRule = reactive({
  // 商品分类
  productCategoryName: "",
  // 商品名称
  name: "",
  // 副标题
  subTitle: "",
  // 商品品牌
  brandName: "",
  //商品介绍
  description: "",
  // 商品货号
  productSn: "",
  // 商品售价
  price: "",
  //市场价
  originalPrice: "",
  // 商品库存
  stock: "",
  // 计量单位
  unit: "",
  // 商品重量
  weight: "",
  // 排序
  sort: "",
});
// 商品促销
const promotionRule = reactive({
  // 赠送积分
  giftPoint: 0,
  // 赠送成长值
  giftGrowth: 0,
  // 积分购买限制
  usePointLimit: 0,
  // 预告商品
  previewStatus: false,
  // 商品上架
  publishStatus: false,
  // 商品推荐
  recommandStatus: false,
  // 新品状态
  newStatus: false,
  // 服务保证
  serviceIds: [],
  // 详细页标题
  detailTitle: "",
  // 详细页描述
  detailDesc: "",
  //商品关键字
  keywords: "",
  // 商品备注
  note: "",
  // 特惠促销开始时间
  promotionStartTime: "",
  // 特惠促销结束时间
  promotionEndTime: "",
  // 促销价格
  promotionPrice: "",
  // 会员价格设置
  memberPriceList: [
    {
      memberLevelId: 1,
      memberLevelName: "黄金会员",
      memberPrice: "",
    },
    {
      memberLevelId: 2,
      memberLevelName: "白金会员",
      memberPrice: "",
    },
    {
      memberLevelId: 3,
      memberLevelName: "钻石会员",
      memberPrice: "",
    },
  ],
  // 阶梯价格
  productLadderList: [
    {
      count: 0,
      discount: 0,
    },
  ],
  // 满减价格
  productFullReductionList: [
    {
      fullPrice: 0,
      reducePrice: 0,
    },
  ],
});
// 商品属性
const attributeRule = reactive({
  // 属性类型
  productAttributeCategoryId: "",
  //  商品规格
  productAttributeValueList: [
    // {
    //   productAttributeId: "",
    //   value: "",
    // },
  ],
  //商品首个展示图片
  pic: "",
  //商品相册
  albumPics: "",
  // 电脑端详情
  detailHtml: "",
  // 移动端详情
  detailMobileHtml: "",
});
// 商品关联
const associationRule = reactive({
  // 关联专题
  subjectProductRelationList: [],
  // 关联优选
  prefrenceAreaProductRelationList: [],
});

const rules = reactive<FormRules>({
  productCategoryName: [
    { required: true, message: "请选择商品分类", trigger: "blur" },
  ],
  name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  subTitle: [{ required: true, message: "请输入副标题", trigger: "blur" }],
  brandName: [{ required: true, message: "请选择商品品牌", trigger: "blur" }],
});

// 逻辑功能
//底部控制填写表单按钮逻辑
let showForm = reactive({
  active: 0,
  showLsit: [true, false, false, false],
});
let changeForm = () => {
  showForm.showLsit = [false, false, false, false];
  showForm.showLsit[showForm.active] = true;
};
let changStept = (type: number) => {
  switch (type) {
    case 0:
      showForm.active--;
      changeForm();
      return;
    case 1:
      showForm.active++;
      changeForm();
      return;
    default:
      return;
  }
};
//第一个按钮还需要校验
const submitForm = (formEl: FormInstance | undefined, type: number) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      changStept(type);
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
// 优惠方式的显示
const radio1 = ref(0);
let showDiscount = reactive([false, false, false, false]);
let changDiscount = (val: number | string | boolean) => {
  for (let index = 0; index < showDiscount.length; index++) {
    showDiscount[index] = false;
  }
  showDiscount[val as number] = true;
};

// 富文本编辑器
let content = ref("");
function handleChange(item: any) {}
// 规格参数点击的调整
let activeName = ref("first");
// 穿梭框内容展示
let shuttle: any = [];
let shuttle2: any = [];

//阶梯价格和满减价格表格功能
// 添加
let addChangePrice = (data: any) => {
  if (data.length < 3) {
    if (data === promotionRule.productLadderList) {
      data.push({
        count: 0,
        discount: 0,
      });
    } else {
      data.push({
        fullPrice: 0,
        reducePrice: 0,
      });
    }
  } else {
    ElMessage({
      type: "warning",
      message: "最多只能添加三条",
    });
  }
};
// 删除
let delChangePrice = (data: any[], index: number) => {
  if (data.length > 1) {
    data.splice(index, 1);
  }
};

// 属性类型改变事件
let attrList = reactive({
  specsList: [] as any,
  paramsList: [] as any,
  arrtArr: [] as any[],
  arrtArr2: [] as any,
});
let attrChange = (val: number) => {
  addProduct
    .attrList({
      cid: val,
      type: 0,
      pageNum: 1,
      pageSize: 100,
    })
    .then((res) => {
      attrList.specsList = [];
      res.list.forEach((i) => {
        attrList.specsList.push(i);
        attrList.arrtArr.push("");
        attrList.arrtArr2.push([]);
      });
    });
  addProduct
    .attrList({
      cid: val,
      type: 1,
      pageNum: 1,
      pageSize: 100,
    })
    .then((res) => {
      attrList.paramsList = [];
      res.list.forEach((i) => {
        attrList.paramsList.push(i);
      });
      console.log(res);
    });
};
let pushAttr = (index: number) => {
  if (attrList.arrtArr[index] !== "") {
    attrList.arrtArr2[index].push({
      value: attrList.arrtArr[index],
    });
  } else {
    ElMessage({
      type: "warning",
      message: "属性不能为空",
    });
  }
  attrList.arrtArr[index] = "";
};
let delAttr = (index: number) => {
  console.log("del");
};

// 弹出警告函数
let alertFn = () => {
  ElMessageBox.confirm("将同步第一个sku的库存到所有sku,是否继续", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "Delete completed",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};

// 上传图片
const fileList = ref<UploadUserFile[]>([]);
let handleAvatarSuccess = (res: any) => {
  ElMessage({
    type: "success",
    message: "上传成功",
  });
  console.log(res);
  attributeRule.pic = res.data.url;
};
let handleAvatarError = () => {
  ElMessage({
    type: "error",
    message: "上传失败",
  });
};

// 最后一个按钮提交
const router = useRouter();
const lastSubmit = () => {
  ElMessageBox.confirm("确定提交该商品吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let allParams = Object.assign(
        {},
        toRaw(promotionRule),
        toRaw(attributeRule),
        toRaw(productInfoRule),
        toRaw(associationRule),
        {
          albumPics: "",
          brandId: 105,
          brandName: productInfoRule.brandName,
          deleteStatus: 0,
          description: "",
          detailDesc: "",
          detailHtml: "",
          detailMobileHtml: "",
          detailTitle: "",
          feightTemplateId: 0,
          flashPromotionCount: 0,
          flashPromotionId: 0,
          flashPromotionPrice: 0,
          flashPromotionSort: 0,
          giftPoint: 0,
          giftGrowth: 0,
          keywords: "",
          lowStock: 0,
          name: productInfoRule.name,
          newStatus: 0,
          note: "",
          originalPrice: 0,
          pic: attributeRule.pic,
          memberPriceList: [
            {
              memberLevelId: 1,
              memberLevelName: "黄金会员",
            },
            {
              memberLevelId: 2,
              memberLevelName: "白金会员",
            },
            {
              memberLevelId: 3,
              memberLevelName: "钻石会员",
            },
          ],
          productFullReductionList: [
            {
              fullPrice: 0,
              reducePrice: 0,
            },
          ],
          productLadderList: [
            {
              count: 0,
              discount: 0,
              price: 0,
            },
          ],
          previewStatus: 0,
          price: 0,
          productAttributeCategoryId: null,
          productAttributeValueList: [],
          skuStockList: [],
          subjectProductRelationList: [],
          prefrenceAreaProductRelationList: [],
          productCategoryId: 197,
          productCategoryName: "11111",
          productSn: "",
          promotionEndTime: "",
          promotionPerLimit: 0,
          promotionPrice: null,
          promotionStartTime: "",
          promotionType: 0,
          publishStatus: 0,
          recommandStatus: 0,
          sale: 0,
          serviceIds: "",
          sort: 0,
          stock: 0,
          subTitle: productInfoRule.subTitle,
          unit: "",
          usePointLimit: 0,
          verifyStatus: 0,
          weight: 0,
        }
      );
      addProduct
        .createProduct(allParams)
        .then(() => {
          ElMessage({
            type: "success",
            message: "创建成功",
          });
          router.go(0);
          console.log(1111);
        })
        .catch(() => {
          ElMessage({
            type: "error",
            message: "创建失败",
          });
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消提交",
      });
    });
};
</script>
<style lang="scss">
.box-card {
  width: 800px;
  margin: 0 auto;
}
.preferentialTime {
  margin-top: 10px;
}
.radio-group {
  margin-bottom: 20px;
}
.submitProduct > .el-form-item__content {
  justify-content: center;
}
// 上传样式
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.recommend {
  margin: 0 10px;
}
.productAttr-card {
  margin-bottom: 20px;
  width: 100%;
  background-color: #f8f9fc;
}
</style>
